<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="青云志是一款在线聊天网站，提供了在线交友、世界聊天、随机聊天、离线信息以及游戏娱乐功能，大家可以在这里找到许多欢乐。">
    <meta name="keywords" content="网站在线聊天，青云志，不坠青云之志，thenie，随机聊天，在线交友，认识新朋友，小游戏，娱乐，放松，交友，简便，快捷">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>登录-青云志在线聊 (゜-゜)つロ 嗨皮~-thenie</title>
    <!-- favicon -->
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
    <!--css bootstrap -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/icons.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css">

</head>
<body class="vertical-layout">
    <!-- 页面 -->
    <div id="containerbar" class="containerbar authenticate-bg">
        <!-- 居中框 -->
        <div class="container">
            <div class="auth-box login-box">
                <!-- 主体-->
                <div class="row no-gutters align-items-center justify-content-center">
                    <!-- 登陆中心框 -->
                    <div class="col-md-6 col-lg-5">
                        <!-- Start Auth Box -->
                        <div class="auth-box-right">
                            <div class="card">
                                <div class="card-body">

                                    <!--登陆表单-->
                                    <form name="loginForm" id="loginForm" method="post" onsubmit="return false">
                                        <div class="form-head">
                                            <a href="index.html" class="logo"><img th:src="@{/images/logo.svg}" class="img-fluid" alt="logo"></a>
                                        </div>                                        
                                        <h4 class="text-primary my-4">登 录 !</h4>

                                        <div class="form-group">
                                            <input type="text" class="form-control" id="username" name="username" value="" placeholder="用户名" required>
                                        </div>
                                        <div class="form-group">
                                            <input type="password" class="form-control" id="password" value="" placeholder="密码" required>
                                        </div>

                                        <div class="form-row mb-3">
                                            <div class="col-sm-6">
                                                <div class="custom-control custom-checkbox text-left">
                                                  <input type="checkbox" class="custom-control-input" id="rememberme">
                                                  <label class="custom-control-label font-14" for="rememberme">记住我</label>
                                                </div>                                
                                            </div>
                                            <div class="col-sm-6">
                                              <div class="forgot-psw"> 
                                                <a id="forgot-psw" href="javascript:;" class="font-14" onclick="forgetPwd()">忘记密码?</a>
                                              </div>
                                            </div>
                                        </div>
                                        <button class="btn btn-success btn-lg btn-block font-18" onclick="login()">登 陆</button>
<!--                                      <a href="index.html" class="btn btn-success btn-lg btn-block font-18">Log in</a>-->
                                    </form>

                                    <!--提示-->
                                    <p class="mb-0 mt-3">你还没有账户? <a th:href="@{/register}">注 册</a></p>
                                </div>
                            </div>
                        </div>
                        <!-- End Auth Box -->
                    </div>
                    <!-- End col -->
                </div>
                <!-- End row -->
            </div>
        </div>
        <!-- End Container -->
    </div>
    <!-- Start js -->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/popper.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/modernizr.min.js}"></script>
    <script th:src="@{/js/detect.js}"></script>
    <script th:src="@{/js/jquery.slimscroll.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <!-- md5.js -->
    <script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <!-- End js -->
    <script>
        function forgetPwd() {
            layer.msg("忘记密码，请联系统管理员~")
        }
        function login() {
            console.log("登陆。。")
            var username = $("#username").val().trim();
            var password = $("#password").val().trim();
            if (username.length==0 ||password.length==0){
                return;
            }

            if(username.length <4 || username.length>12 ){
                layer.msg("用户名格式不正确！",{icon: 5})
            }else if (password.length <4 || password.length> 20){
                layer.msg("密码格式不正确！",{icon: 5})
            } else{
                var pwd =g_goServerPass(password);
                g_showLoading();
                $.ajax({
                    url: "/login/doLogin",
                    type: "POST",
                    data: {
                        username: username,
                        password: pwd
                    },
                    success: function (data) {

                        if (data.code == 200){
                            window.location.href="/index";
                            layer.msg("登陆成功,正在跳转...", {icon:1});
                        }else{
                            layer.msg(data.message,{icon:2});
                        }
                    },
                    error: function () {
                        layer.closeAll();
                    }
                });
            }
        }
    </script>
</body>
</html>